<template>
  <div class="container">
    <p>提交记录</p>
    <el-select
      v-model="semester"
      placeholder="请选择学期"
      class="class_select"
      clearable
    >
      <el-option
        v-for="item in semesterlist"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button
      style="margin-left: 20px"
      type="primary"
      @click="get_student_records"
      >搜索</el-button
    >

    <div v-for="item in all_records">
      <template>
        <el-table :data="item.grade" style="width: 100%">
          <el-table-column prop="course_name" label="课程"> </el-table-column>
          <el-table-column prop="credit" label="学分"> </el-table-column>
          <el-table-column prop="grade" label="成绩"> </el-table-column>
          <el-table-column prop="nature" label="课程性质"> </el-table-column>
        </el-table>
      </template>
      <template>
        <el-table :data="item.records" style="width: 100%; margin-top: 20px">
          <el-table-column prop="name" label="附加分名称"> </el-table-column>
          <el-table-column prop="nature" label="类型"> </el-table-column>
          <el-table-column prop="additional_rank" label="自评等级">
          </el-table-column>
          <el-table-column prop="fraction" label="规定分数"> </el-table-column>
          <el-table-column prop="supplement" label="补充分数">
          </el-table-column>
          <el-table-column prop="certificate" label="证书名称">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { request } from "../request/http.js";
export default {
  name: "records",
  components: {},
  data() {
    return {
      grade: [],
      records: [],
      all_records: [],
      semester: "",
      semesterlist: [
        {
          name: "大一上期",
          value: "1",
        },
        {
          name: "大一下期",
          value: "2",
        },
        {
          name: "大二上期",
          value: "3",
        },
        {
          name: "大二下期",
          value: "4",
        },
        {
          name: "大三上期",
          value: "5",
        },
        {
          name: "大三下期",
          value: "6",
        },
        {
          name: "大四上期",
          value: "7",
        },
        {
          name: "大四下期",
          value: "8",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      username: (state) => state.name,
      roleid: (state) => state.role,
      userid: (state) => state.user_id,
    }),
  },
  methods: {
    get_student_records() {
      var semester = this.semester;
      this.get_user_submit_records(semester);
    },
    get_user_submit_records(semester) {
      if (this.userid) {
        this.all_records = []
        request({
          url: "/score-rule/get-user-submit-records/",
          params: {
            user_id: this.userid,
            semester: semester,
          },
        })
          .then((res) => {
            const data = res.data;
            if (data.length == 0) {
              this.$message.error('本学期暂未提交数据')
            } 
            data.map((item) => {
              item.character = JSON.parse(item.character.replace(/\'/g, '"'));
              item.grade = JSON.parse(item.grade.replace(/\'/g, '"'));
              item.study = JSON.parse(item.study.replace(/\'/g, '"'));
              item.style = JSON.parse(item.style.replace(/\'/g, '"'));
              this.all_records.push({
                grade: item.grade,
                records: item.character.concat(item.study).concat(item.style),
              });
            });
            console.log(this.all_records);
          })
          .catch((err) => {
            this.$message.error("请求出错");
          });
      }
    },
  },
  mounted() {
    // this.get_user_submit_records();
  },
};
</script>
